<template>
	<div class="tabel_Background">
		<div class="tabel_Background-wra">
			<div id="title">
				<span class="title-text">{{ title }}</span>
			</div>
			<div class="container" ref="usage_ref" style="width: 100%;height: 80%;"></div>
		</div>
	</div>
</template>

<script>
	import * as echarts from "echarts";
	export default {
		name: "MtableRight",
		data() {
			return {
				chartInstance: null,
				allData: null
			};
		},
		mounted() {
			this.initChart();
			this.getData();
		},
		methods: {
			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.usage_ref);
			},
			getData() {
				//服务器的数据请求位置

				// this.allData = ret
				this.updateChart();
			},
			updateChart() {
				let dataAxis = [
					"2021/3/1",
					"2021/3/2",
					"2021/3/3",
					"2021/3/4",
					"2021/3/5",
					"2021/3/6",
					"2021/3/7",
					"2021/3/8",
					"2021/3/9",
					"2021/3/10",
					"2021/3/11",
					"2021/3/12",
					"2021/3/13",
					"2021/3/14",
					"2021/3/15",
					"2021/3/16",
					"2021/3/17",
					"2021/3/18",
					"2021/3/19",
					"2021/3/20",
					"2021/3/21",
					"2021/3/22",
					"2021/3/23",
					"2021/3/24",
					"2021/3/25",
					"2021/3/26",
					"2021/3/27",
					"2021/3/28",
					"2021/3/29",
					"2021/3/30",
					"2021/3/31",
					"2021/4/1",
					"2021/4/2",
					"2021/4/3",
					"2021/4/4",
					"2021/4/5",
					"2021/4/6",
					"2021/4/7",
					"2021/4/8",
					"2021/4/9",
					"2021/4/10",
					"2021/4/11",
					"2021/4/12",
					"2021/4/13",
					"2021/4/14",
					"2021/4/15",
					"2021/4/16",
					"2021/4/17",
					"2021/4/18",
					"2021/4/19",
					"2021/4/20",
					"2021/4/21",
					"2021/4/22",
					"2021/4/23",
					"2021/4/24",
					"2021/4/25",
					"2021/4/26",
					"2021/4/27",
					"2021/4/28",
					"2021/4/29",
					"2021/4/30"
				];
				// prettier-ignore
				let data = [22, 28, 19, 23, 29, 13, 21, 12, 25, 30, 22, 28, 4, 6, 19, 23, 29, 13, 22, 31, 12, 25, 23, 13, 21, 5,
					13, 14, 21, 12, 13, 10, 14, 21, 12, 13, 23, 10, 19, 5, 13, 14, 21, 12, 23, 24, 15, 23, 15, 10, 5, 13, 14,
					21, 20, 19, 12, 12, 22, 14, 6, 24
				];
				let yMax = 30;
				let dataShadow = [];
				for (let i = 0; i < data.length; i++) {
					dataShadow.push(yMax);
				}
				const option = {
					grid: {
						top: "23%", // 等价于 y: '16%'
						left: "4%",
						right: "4%",
						bottom: "0%",
						containLabel: true
					},
					tooltip: {
						trigger: "axis"
					},
					xAxis: {
						data: dataAxis,
						axisLabel: {
							marigin:50,
							color: "#07DBFF"
						},
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: "#07DBFF"
							}
						},
						z: 10
					},
					yAxis: {
						name: "单位：口",
						axisLine: {
							show: true,
							lineStyle: {
								color: "#07DBFF"
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							color: "#07DBFF"
						},
						min: 0, // 设置y轴刻度的最小值
						max: 30
					},
					dataZoom: [{
							type: "inside",
							start: 0,
							end: 20
						},
						{
							height: 5,
							bottom: '15%',
							start: 0,
							end: 20
						}
					],
					legend: {
						data: ["油井数"],
						right: "5%",
						textStyle: {
							color: "#ffffff"
						}
					},
					series: [{
						name: "油井数",
						type: "bar",
						showBackground: true,
						itemStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: "#FCA301"
								},
								{
									offset: 0.5,
									color: "#e8b601"
								},
								{
									offset: 1,
									color: "#ccbf02"
								}
							])
						},
						barWidth: 15, // 柱形的宽度
						emphasis: {
							itemStyle: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: "#F72323"
									},
									{
										offset: 0.7,
										color: "#F72323"
									},
									{
										offset: 1,
										color: "#F68383"
									}
								])
							}
						},
						data: data
					}]
				};
				// Enable data zoom when user click bar.
				const zoomSize = 6;
				this.chartInstance.on("click", params => {
					this.chartInstance.dispatchAction({
						type: "dataZoom",
						startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
						endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
					});
				});
				this.chartInstance.setOption(option);
			}
		},
		props: {
			title: String
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	.container {
		width: 100%; // 4.75rem;
		height: 100%; //1.15rem;
	}

	.tabel_Background {
		width: 52%; //4.85rem;
		min-width: 3rem;
		height: 100%; //1.48rem;
		box-sizing: border-box;
	}

	.tabel_Background-wra {
		width: 100%; //3.02rem;
		min-width: 2.96rem;
		height: 100%;
		// border: 1px solid rgb(12, 50, 107);
		background-image: url("../../assets/bg2.png");
		// background-image: url('./../../../assets/mobile/pre-share-page@2x.png');
		background-repeat: no-repeat;
		background-size: 100% 100%; // contain; // cover;
		padding: 2%;
		box-sizing: border-box;
	}

	#title {
		width: 40%;
		height: 13%;
		text-align: center;
		font-size: 6px;
		background-image: url("../../assets/title_outline@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%; //cover;
		position: relative;
	}

	.title-text {
		position: absolute;
		left: 3%;
		top: 17%;
		color: #21beeb;
		font-weight: bold;
	}
</style>
